<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		
        <title>Dulcet - Admin Theme </title>
		
		<!-- ==================================================================================== 
			STYLES BEGIN 
		===================================================================================== -->
		
		<!-- Global styles -->
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/grid.css" />
		<link rel="stylesheet" type="text/css" href="css/config.css" />

		<!-- Plugin configuration (styles) -->
		<link rel="stylesheet" href="css/plugin_config.css" />
		
		<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
		
		
		<!-- ======================================================================================
			SCRIPTS BEGIN
		======================================================================================= -->
        
	<!-- = Global Scripts [required for template] 
		***************************************************************************************-->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/global_plugins_scripts.js"></script>
		
		
		
	<!-- = From Plugins Dir 
		***************************************************************************************-->
		
		<script type="text/javascript" src="plugins/lightbox/js/lightbox/jquery.lightbox.min.js"></script>
		<script type="text/javascript" src="plugins/jqueryui/all/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="plugins/validator/js/languages/jquery.validationEngine-en.js"></script>
		<script type="text/javascript" src="plugins/validator/js/jquery.validationEngine.js"></script>
		<script type="text/javascript" src="plugins/dialogs/jquery-fallr-1.2.js"></script>
		<script type="text/javascript" src="plugins/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
		<script type="text/javascript" src="plugins/spin/jquery-spin.js"></script>
		<script type="text/javascript" src="plugins/qtip/jquery.qtip.min.js"></script>
		<script type="text/javascript" src="plugins/plupload/js/browserplus-min.js"></script>
		<script type="text/javascript" src="plugins/plupload/js/plupload.full.js"></script>
		<script type="text/javascript" src="plugins/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
		<script type="text/javascript" src="plugins/multiselect/js/ui.multiselect.js"></script>			
		<script type="text/javascript" src="plugins/datatables/media/js/jquery.dataTables.js"></script>	
		<script type="text/javascript" src="plugins/alerts/javascript/jquery.toastmessage.js"></script>	
		<script type="text/javascript" src="plugins/prettify/prettify.js"></script>
		<script type="text/javascript" src="plugins/fullcalendar/fullcalendar.min.js"></script>
				
		<script type="text/javascript" src="plugins/fileexplorer/js/elfinder.min.js"></script>	
		<!--<script src="plugins/fileexplorer/js/i18n/elfinder.ru.js" type="text/javascript" charset="utf-8"></script>-->	
		
		<!-- Flotr2 Charts -->
		<script type="text/javascript" src="plugins/flotr2/flotr2.min.js"></script>
		<!--[if IE 8]><script type="text/javascript" src="plugins/flotr2/flotr2.ie.min.js"></script><![endif]-->
		
		<!-- color picker -->
		<script type="text/javascript" src="plugins/colorpicker/js/colorpicker.js"></script>
		<script type="text/javascript" src="plugins/colorpicker/js/eye.js"></script>
		<script type="text/javascript" src="plugins/colorpicker/js/utils.js"></script>
		<script type="text/javascript" src="plugins/colorpicker/js/layout.js"></script>
		
		
		
	<!-- = From JS Dir
		****************************************************************************************-->
		
		<script type="text/javascript" src="js/modernizr.custom.js"></script>
		<script type="text/javascript" src="js/jquery.autogrowtextarea.js"></script>
		<script type="text/javascript" src="js/jquery.autotab-1.1b.js"></script>
		
		<!-- From JS Dir [plugin initialization] -->
		<script type="text/javascript" src="js/dialog_fallr_init.js"></script>
		<script type="text/javascript" src="js/tiny_mce_init.js"></script>
		<script type="text/javascript" src="js/datatables_init.js"></script>
		<script type="text/javascript" src="js/head_scripts.js"></script>
				
		
    </head>
    <body>
				
		<section id="layout">
		
			<div class="logo_profile container_12">
				<div class="grid_6 logo_img">
					<img src="images/logo.png" alt="Logo" />
				</div>
				<div class="grid_6 profile_meta">
					<div class="user_meta">
						<div>
							<img src="images/smartik.jpg" alt="" />
						</div>
						<div class="name">
							Welcome Smartik <br />
							<a href="#" class="submeta">Profile</a>
							<a href="#" class="submeta">Logout</a>
						</div>
					</div>
				</div>
			
				<div class="clear"></div>
			</div>
	
			<section id="top">
					
				<section id="top_bar">						
					<section id="main_menu">
						<ul class="sf-menu">
							<li><a href="index.html">Dashboard</a></li>
							<li><a href="#">Elements</a>
								<ul>
									<li><a href="form_elements.html">Form elements</a></li>
									<li><a href="user_interface.html">User Interface</a></li>
									<li><a href="generic_icons.html">Generic icons</a></li>
									<li><a href="tabs_accordion.html">Tabs Accordion</a></li>
									<li><a href="grid.html">Template grid</a></li>
									<li><a href="#">Another menu level</a>
										<ul>
											<li><a href="#">Lorem ipsum</a></li>
											<li><a href="#">Dolor sit amet</a></li>
											<li><a href="#">Aenean molestie</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li><a href="#">Plugins</a>
								<ul>
									<li><a href="charts.html">Charts</a></li>
									<li><a href="datatables.html">Data tables</a></li>
									<li><a href="syntax_highlight.html">Syntax Highlighter</a></li>
									<li><a href="form_plugins.html">Form specific plugins</a></li>
									<li><a href="file_explorer.html">File explorer</a></li>
									<li><a href="full_calendar.html">Full calendar</a></li>
								</ul>
							</li>
							<li><a href="#">Gallery example</a>
								<ul>
									<li><a href="gallery.html">Gallery 1</a></li>
									<li><a href="gallery2.html">Gallery 2</a></li>
								</ul>
							</li>
							<li><a href="#">Documentation</a>
								<ul>
									<li><a href="zHtmlstructure.html">HTML Structure</a></li>
									<li><a href="zForms.html">Forms Structure</a></li>
									<li><a href="zColorpicker.html">Color Picker</a></li>									
									<li><a href="zDatepicker.html">Date Picker</a></li>									
									<li><a href="zSlider.html">Slider</a></li>									
									<li><a href="zProgressbar.html">Progress Bar</a></li>						
									<li><a href="zTabs.html">Tabs</a></li>		
									<li><a href="zAccordion.html">Accordion</a></li>		
									<li><a href="zCharts.html">Charts( Flotr2 )</a></li>	
									<li><a href="zDataTables.html">Data Tables</a></li>
									<li><a href="zFileExplorer.html">File Explorer( elFinder )</a></li>
									<li><a href="zDialogsAlerts.html">Dialogs &amp; Alerts</a></li>
									<li><a href="zRequirements.html">Requirements</a></li>
								</ul>
							</li>
						</ul>							
					<div class="clear"></div>
					</section><!-- End of #main_menu -->
				</section><!-- End of #top_bar -->
				<div class="clear"></div>
				
				<section class="top_in">	
					<section id="second_top_bar">
						<div id="quick_task" class="jThumbnailScroller">
							<div class="jTscrollerContainer">
							<div class="clear"></div>
								<ul class="jTscroller">
									<li><a href="#"><span class="icon1"></span>Dashboard</a></li>
									<li><a href="#"><span class="icon2"></span>Forms</a></li>
									<li><a href="#"><span class="icon3"></span>Charts</a></li>
									<li><a href="#"><span class="icon4"></span>Organizer</a></li>
									<li><a href="#"><span class="icon5"></span>Settings</a></li>
									<li><a href="#"><span class="icon7"></span>Tables</a></li>
									<li><a href="#"><span class="icon6"></span>Contacts</a></li>
									<li><a href="#"><span class="icon8"></span>File explorer</a></li>
									<li><a href="#"><span class="icon9"></span>Users</a></li>
									<li><a href="#"><span class="icon10"></span>Upload</a></li>
									<li><a href="#"><span class="icon13"></span>Download</a></li>
									<li><a href="#"><span class="icon11"></span>Plus</a></li>
									<li><a href="#"><span class="icon12"></span>Add product</a></li>
									<li><a href="#"><span class="icon14"></span>Photos</a></li>
									<li><a href="#"><span class="icon15"></span>Comments</a></li>
									<li><a href="#"><span class="icon17"></span>New mail</a></li>
									<li><a href="#"><span class="icon16"></span>Database</a></li>
									<li><a href="#"><span class="icon18"></span>Favorites</a></li>
									<li><a href="#"><span class="icon19"></span>Security settings</a></li>
									<li><a href="#"><span class="icon20"></span>New page</a></li>
								</ul>
								<div class="clear"></div>
							</div>										
							<div class="clear"></div>
						</div>
						<div class="clear"></div>						
					</section><!-- End of #second_top_bar -->
				</section><!-- End of .top_in -->
				
			</section><!-- End of #top -->
			

			
	
			<section id="container" class="container_12">
			
			
				<!-- ======= .grid_12 - block begin ======= -->
				<section class="grid_12">
					<div class="box">
						<div class="title"><div class="layout">Date Picker</div></div>						
						<div class="inside">
							<div class="in">
							
							<div class="clear"></div>
							<a href="zColorpicker.html" class="button alignleft"><span class="icon16_sprite_green i_arrowhead_left"></span>Color Picker</a>
							<a href="zSlider.html" class="button alignright"><span class="icon16_sprite_green b_right i_arrowhead_right"></span>Slider</a>
							<div class="clear"></div>
							
							<h4 class="docs_title_first">Date Picker</h4>
							By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.</p>
							<p><strong>How to create a Date picker?</strong></p>
							<p><strong>1. Initialize the plugin</strong></p>
<pre>jQuery(function() {
	jQuery( "#datepicker" ).datepicker({
		showAnim: 'slide'
	});
});</pre><br />
							<strong>2. Attach it to a a text input using the ID <code>"datepicker"</code></strong> <em>(for this example)</em><br /><br />
                            
                            <pre>&lt;input type="text" id="datepicker" /></pre><br />
							
							<div class="docs_result"><span class="docsR_title">The result of the code above:</span>						
								<form class="formee" action="#">
		
									<div class="grid-4-12"></div>
									
									<div class="grid-4-12">
										<input type="text" id="datepicker" class="sizew200" />
									</div>
									
									<div class="grid-4-12"></div>
									<div class="clear"></div>
								</form><br/>
							</div>
							<div class="clear"></div>
							
							<div class="box">
								<div class="title">Main Options</div>								
								<div class="inside">
									<table cellpadding="0" cellspacing="0" border="0" class="display" id="datatable_1docs">
										<thead>
											<tr>
												<th width="15%">OPTION</th>
												<th width="15%">TYPE</th>
												<th width="15%">DEFAULT</th>
												<th width="65%">DESCRIPTION</th>
											</tr>
										</thead>
										<tbody>
										
											<tr class="gradeA odd">
												<td><code>disabled</code></td>  <td><code>boolean</code></td>  <td><code>false</code></td>
												<td>Disables (true) or enables (false) the datepicker. Can be set when initialising (first creating) the datepicker. </td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>altField</code></td>  <td><code>Selector</code>, <code>jQuery</code>, <code>Element</code></td>  <td><code>''</code></td>
												<td> The jQuery selector for another field that is to be updated with the selected date from the datepicker. Use the <code>altFormat</code> setting to change the format of the date within this field. Leave as blank for no alternate field. </td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>altFormat</code></td>  <td><code>String</code></td>  <td><code>''</code></td>
												<td>The <code>dateFormat</code> to be used for the <code>altField</code> option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the <code>formatDate</code> function</td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>appendText</code></td>  <td><code>String</code></td>  <td><code>''</code></td>
												<td> The text to display after each date field, e.g. to show the required format. </td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>autoSize</code></td>  <td><code>Boolean</code></td>  <td><code>false</code></td>
												<td>Set to true to automatically resize the input field to accommodate dates in the current <code>dateFormat</code>.</td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>buttonText</code></td>  <td><code>String</code></td>  <td><code>'...'</code></td>
												<td> The text to display on the trigger button. Use in conjunction with <code>showOn</code> equal to 'button' or 'both'. </td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>changeMonth</code></td>  <td><code>Boolean</code></td>  <td><code>false</code></td>
												<td> Allows you to change the month by selecting from a drop-down list. You can enable this feature by setting the attribute to <code>true</code>. </td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>changeYear</code></td>  <td><code>Boolean</code></td>  <td><code>false</code></td>
												<td> Allows you to change the year by selecting from a drop-down list. You can enable this feature by setting the attribute to true. Use the <code>yearRange</code> option to control which years are made available for selection. </td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>dateFormat</code></td>  <td><code>String</code></td>  <td><code>'mm/dd/yy'</code></td>
												<td> The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the <code>formatDate</code> function. </td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>defaultDate</code></td>  <td><code>Date</code>, <code>Number</code>, <code>String</code></td>  <td><code>null</code></td>
												<td> Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current <code>dateFormat</code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today. </td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>duration</code></td>  <td><code>String</code>, <code>Number</code></td>  <td><code>'normal'</code></td>
												<td> Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast"). </td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>firstDay</code></td>  <td><code>Number</code></td>  <td><code>0</code></td>
												<td> Set the first day of the week: Sunday is 0, Monday is 1, ... This attribute is one of the regionalisation attributes. </td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>maxDate</code></td>  <td><code>Date</code>, <code>Number</code>, <code>String</code></td>  <td><code>null</code></td>
												<td> Set a maximum selectable date via a Date object or as a string in the current <code>dateFormat</code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +1w'), or null for no limit. </td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>minDate</code></td>  <td><code>Date</code>, <code>Number</code>, <code>String</code></td>  <td><code>null</code></td>
												<td> Set a minimum selectable date via a Date object or as a string in the current <code>dateFormat</code>, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.</td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>showAnim</code></td>  <td><code>string</code></td>  <td><code>'show'</code></td>
												<td> Set the name of the animation used to show/hide the datepicker. Use <code>'show'</code> (the default), <code>'slideDown'</code>, <code>'fadeIn'</code>, any of the show/hide <a href="http://docs.jquery.com/UI/Effects" target="_blank">jQuery UI effects</a>, or '' for no animation. </td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>showOn</code></td>  <td><code>String</code></td>  <td><code>'focus'</code></td>
												<td> Have the datepicker appear automatically when the field receives focus ('focus'), appear only when a button is clicked ('button'), or appear when either event takes place ('both'). </td>
											</tr>
											
											<tr class="gradeA odd">
												<td><code>showOptions</code></td>  <td><code>Options</code></td>  <td><code>{}</code></td>
												<td> If using one of the jQuery UI effects for <code>showAnim</code>, you can provide additional settings for that animation via this option </td>
											</tr>
											
											<tr class="gradeA even">
												<td><code>yearRange</code></td>  <td><code>String</code></td>  <td><code>'c-10:c+10'</code></td>
												<td> Control the range of years displayed in the year drop-down: either relative to today's year (-nn:+nn), relative to the currently selected year (c-nn:c+nn), absolute (nnnn:nnnn), or combinations of these formats (nnnn:-nn). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the <code>minDate</code> and/or <code>maxDate</code> options. </td>
											</tr>
																						
											
										</tbody>
										<tfoot>
											<tr>
												<th>OPTION</th>
												<th>TYPE</th>
												<th>DEFAULT</th>
												<th>DESCRIPTION</th>
											</tr>
										</tfoot>
									</table>								
									<div class="clear"></div>
								</div>
							</div>
							
							
							<!-- Reference -->
							<div class="docs_refer">
								<strong>Reference:</strong><br /> 
								<ul>
								<li><a href="http://jqueryui.com/demos/datepicker/" target="_blank">http://jqueryui.com/demos/datepicker/</a> - DatePicker plugin official website. For more options and examples, please follow this link. </li>
								</ul>
							</div>
							<!-- /Reference -->
							
							
							<div class="clear"></div>
							<a href="zColorpicker.html" class="button alignleft"><span class="icon16_sprite_green i_arrowhead_left"></span>Color Picker</a>
							<a href="zSlider.html" class="button alignright"><span class="icon16_sprite_green b_right i_arrowhead_right"></span>Slider</a>
							<div class="clear"></div>
							</div>
						</div>
					</div>
				</section>
				<div class="clear"></div>
				<!-- ======= .grid_12 - block end ======= -->
				
				
			</section><!-- End of #container -->
			

			
			
		</section><!-- End of #layout -->
		<div class="clear"></div>

		<section id="footer_bar">
			<div class="copyr">Copyright &copy; Smartik 2012</div>
		</section>		
		
		
		<!-- Bottom Scripts -->
		<script type="text/javascript" src="js/jqueryui_init.js"></script>
		<script type="text/javascript" src="js/flotr2_init.js"></script>	
		<script type="text/javascript" src="js/bottom_scripts.js"></script>
		<script type="text/javascript" src="js/custom_pages.js"></script>
		<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>
				
    </body>
</html>